227829 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

とある日常

とある日常

テーブル枠の色を変える 2

■ テーブルの枠の色を変える2


暗い部分に色をつける
<table bordercolordark=" 属性値 ">～</table>
<tr bordercolordark=" 属性値 ">～</tr>
<td bordercolordark=" 属性値 ">～</td>

明るい部分に色をつける
<table bordercolorlight=" 属性値 ">～</table>
<tr bordercolorlight=" 属性値 ">～</tr>
<td bordercolorlight=" 属性値 ">～</td>

この2つを組み合わせることで、暗い部分・明るい部分に分けて色付けができるんです。
属性値には「色の名前」か「ＲＧＢ値」を入れます。


たとえばこの例をみてください。



「table」に
「bordercolordark」を設定：

●○
□■




<table border="3" bordercolordark="red">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>




さらに・・・
「bordercolorlight」を設定：

●○
□■




<table border="3" bordercolordark="red" bordercolorlight="#ff9900">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>




「tr」に設定した例：

●○
□■




<table border="3">
<tr bordercolordark="#003300" bordercolorlight="#009900"><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>




「td」に設定した例：

●○
□■




<table border="3">
<tr><td bordercolordark="#333399" bordercolorlight="#33ff99">●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>



このように暗い部分と明るい部分に色をわけてつけていくことができました。

© Rakuten Group, Inc.